article.chapter {
  h2 {
    font: 600 30px/24px $serif;
    margin: 69px 0 0 0;
    padding-bottom: 3px;

    small {
      font: 800 22px/24px $serif;
      float: right;
    }
  }

  h3 {
    font: italic 24px/24px $serif;
    margin: 71px 0 0 0;
    padding-bottom: 1px;

    small {
      font: 600 16px/24px $serif;
      float: right;
    }
  }

  h2 a, h3 a {
    color: #222;
    border-bottom: none;
  }

  h2 a:hover, h3 a:hover {
    border-bottom: none;
    color: inherit;
  }

  h2 a::before, h3 a::before {
    position: absolute;
    left: -$col;
    width: $col;
    content: "\000A7";
    color: #fff;
    transition: color 0.2s ease;
    text-align: center;
  }

  h2 a:hover::before, h3 a:hover::before {
    color: #ddd;
  }

  .challenges, .design-note {
    border-radius: 3px;
    padding: 12px;
    margin: -2px -12px 26px -12px;

    font: normal 16px/24px $nav;
    color: #444;

    h2 {
      margin: 0 0 -12px 0;
      padding: 0;
      font: 600 16px/24px $nav;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    h2 a {
      color: inherit;
    }

    h2 a::before {
      content: none;
    }

    ol {
      padding: 0 0 0 18px;

      li {
        padding: 0 0 0 6px;
        font-weight: 600;

        p {
          font-weight: 400;
        }
      }
    }

    pre {
      margin: 0;
    }

    // Chapter 23 has some blockquotes in the design note.
    > blockquote {
      p {
        margin: 0 24px;
        font: italic 16px/24px $nav;
        color: #444;
      }

      &::before, &::after {
        content: none;
      }
    }

    // Use the regular code colors in asides, and not the tinted versions used
    // inside the challenge or design notes boxes themselves.
    aside {
      code, .codehilite {
        color: $warm-dark;
        background: $warm-light;
      }
    }

    // Remove the extra padding at the bottom of the box.
    *:last-child {
      margin-bottom: 0;
    }
  }

  .challenges .codehilite,
  .design-note .codehilite {
    margin: -12px 0 -12px 0;
  }

  .challenges {
    background: $lighter;

    code, .codehilite {
      background: hsl(195, 30%, 92%);
    }
  }

  .design-note {
    background: hsl(80, 30%, 96%);

    code, .codehilite {
      background: hsl(80, 20%, 93%);
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    thead {
      font: 700 15px $serif;
    }

    td {
      border-bottom: solid 1px $light;
      line-height: 22px;
      padding: 3px 0 0 0;
      margin: 0;
    }

    td + td {
      padding-left: 12px;
    }
  }
}

// Tablets and mobile go single column.
@media only screen and (max-width: $col * 20) {
  article.chapter {

    // Now that the asides are inline, make them match the challenge/design-note
    // colors and font.
    .challenges, .design-note {
      aside {
        font: normal 15px/24px $nav;
        padding-bottom: 4px;
      }
    }

    .challenges {
      aside {
        code, .codehilite {
          background: hsl(195, 30%, 92%);
        }
      }
    }

    .design-note {
      aside {
        code, .codehilite {
          background: hsl(80, 20%, 93%);
        }
      }
    }
  }
}

// Then bring the margins in some.
// The cut-off sizes here are based on trying to get 72 columns of code to fit.
@media only screen and (max-width: 630px) {
  article.chapter {
    h2 a::before, h3 a::before {
      left: -($col / 2);
      width: $col / 2;
    }
  }
}

// Finally start shrinking text.
@media only screen and (max-width: 580px) {
  article.chapter {
    h2 {
      margin-top: 64px;
      padding-bottom: 2px;
      font-size: 22px;
      line-height: 22px;
    }

    h3 {
      margin-top: 64px;
      padding-bottom: 0;
      font-size: 20px;
    }

    .challenges, .design-note {
      padding: 11px 11px 8px 11px;
      margin: 25px 0 0 0;

      font-size: 15px;
      line-height: 22px;

      code, .codehilite {
        font-size: 14px;
      }

      h2 {
        padding: 5px 0 4px 6px;
        font-size: 17px;
        line-height: 22px;
      }

      aside {
        line-height: 22px;
      }
    }
  }
}
